<template>
  <div class="secondskill">
    <div class="top_kill">

      <van-count-down :time="time">
        <template #default="timeData">
          <span class="kill">嗨购秒杀</span>
          <span class="clock">20点场</span>
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
      <p>
        <span class="wenzi">爆款轮番秒</span>
        <span class="jt">></span>
      </p>
    </div>
    <div class="bottom_kill">
      <figure v-for="goods in goodslist" :key="goods.proid" @click="goGoods(goods.proid)">
        <img
          :src="goods.img1"
          >
        <figcaption>
          ￥{{goods.originprice}}
        </figcaption>
     
      </figure>
    </div>

  </div>

</template>

<script>
import axios from 'axios';
export default {
  name:'SecondsKill',
  data() {
    return {
      time: 36000000,
      goodslist: []
    }
  },
  methods: {
    goGoods(proid){
      this.$router.push('./goods?id='+proid)
    }
  },
  created() {
    axios({
      url: 'pro/seckilllist',
    })
      .then(res => {
        if (res.data.code == 200) {
          this.goodslist =res.data.data
        } else {
          console.log('err',err);
        }

      })
  }
}
</script>

<style scoped>
.secondskill {
  height: 9.25rem;
  margin:.625rem;
  background-color: white;
  border-radius: .625rem;
}

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.top_kill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.125rem;
  background: url() no-repeat center;
  background-size: cover;
  overflow: hidden;
}

.top_kill .kill,
.clock {
  margin-right: .625rem;
}

.top_kill .clock {
  color: red;
}

.top_kill p .wenzi {
  color: #f66;
  color: .625rem;
}

.top_kill p .jt {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background-color: #f66;
  color: white;
  font-size: .5rem;
  text-align: center;
  line-height: .625rem;
  vertical-align: middle;
}

.bottom_kill {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.bottom_kill figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 15%;
}

.bottom_kill figure img {
  width: 100%;
}
</style>